<template>
	<view class="date-picker">
		<slot name="action">
			<view class="date-picker-title" @tap="openDate">
				<view v-if="prefixIcon" class="mr10">
					<u-icon :name="prefixIcon" color="#165dff" size="44rpx"></u-icon>
				</view>
				<text class="u-line-1 text">{{ title }}</text>
				<u-icon name="arrow-down" bold color="#555555" size="22rpx"></u-icon>
			</view>
		</slot>
		<u-popup :round="12" mode="bottom" :show="showDate" @close="showDate = false">
			<view class="date-picker-popup">
				<view class="date-picker-popup-header">
					<view class="date-picker-popup-header-left font-info" @tap="closeDate">取消</view>
					<view class="date-picker-popup-header-center">
						<text>周期选择</text>
					</view>
					<view class="date-picker-popup-header-right" @tap="confirmDate">完成</view>
				</view>
				<view class="date-picker-popup-select time-select" v-if="shortcut">
					<view class="time-select-item" v-for="(item, index) in options" :key="index" @tap="handleTimeSelect(item)">
						{{ item.label }}
					</view>
				</view>
				<view class="date-picker-popup-center">
					<view class="date-picker-popup-center-item" :class="{ 'active-time': activeTime === 0 }" @tap="handleTimeItem(0)">
						{{ innerValue[0] || '-' }}
					</view>
					<view class="date-picker-popup-center-unit">至</view>
					<view class="date-picker-popup-center-item" :class="{ 'active-time': activeTime === 1 }" @tap="handleTimeItem(1)">
						{{ innerValue[1] || '-' }}
					</view>
				</view>
				<DatePickerBox :minDate="datePickerMinDate" ref="datePicker" @change="datePickerChange"></DatePickerBox>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { shortcuts } from '@/codecat/utils/index.js';
import DatePickerBox from './date-picker-box';
import dayjs from 'dayjs';
export default {
	components: {
		DatePickerBox
	},
	props: {
		value: {
			type: Array,
			default: () => []
		},
		minDate: {
			type: String,
			default: ''
		},
		prefixIcon: {
			type: String,
			default: ''
		},
		maxDate: {
			type: String,
			default: ''
		},
		shortcut: {
			type: Boolean,
			default: true
		},
		shortcutsList: {
			type: Array,
			default: () => []
		}
	},
	computed: {
		datePickerMinDate() {
			return this.minDate ? dayjs(this.minDate).format('YYYY-MM-DD') : dayjs().subtract(10, 'y').format('YYYY-MM-DD');
		},
		datePickerMaxDate() {
			return this.maxDate ? dayjs(this.maxDate).format('YYYY-MM-DD') : dayjs().add(10, 'y').format('YYYY-MM-DD');
		},
		datePickerValue() {
			return this.innerValue[this.activeTime];
		},
		title() {
			let result = '-';

			const selection = this.value.length && !!this.value[0] && !!this.value[1] ? this.value : this.options[0]?.value() || [];

			let [start, end] = selection;
			if (!start || !end) return result;

			start = dayjs(start).format('YYYY-MM-DD 00:00:00');
			end = dayjs(end).format('YYYY-MM-DD 23:59:59');

			const isSame = shortcuts().find((item) => {
				const short = item.value();
				return JSON.stringify([start, end]) === JSON.stringify(short);
			});
			result = isSame ? isSame.label : `${start.split(' ')[0]} - ${end.split(' ')[0]}`;

			return result;
		}
	},
	data() {
		return {
			showDate: false,
			activeTime: 0,
			innerValue: [],
			options: [],
			select: {}
		};
	},
	mounted() {
		this.options = this.shortcutsList?.length ? this.shortcutsList : shortcuts();
	},
	methods: {
		init() {
			const isInitValue = this.value.length && !!this.value[0] && !!this.value[1];
			let [start, end] = isInitValue ? this.value : this.options[0].value();
			start = dayjs(start).format('YYYY-MM-DD');
			end = dayjs(end).format('YYYY-MM-DD');
			this.innerValue = [start, end];

			// if (update === 1) {
			// 	const value = this.$lodash.cloneDeep(this.innerValue)
			// 	value.forEach((e, index) => {
			// 		value[index] = dayjs(e).format(index === 0 ? 'YYYY-MM-DD 00:00:00' :
			// 			'YYYY-MM-DD 23:59:59')
			// 	})
			// 	console.log(value, this.innerValue);
			// 	this.$emit("update:value", value)
			// }
		},
		handleTimeItem(val) {
			if (this.activeTime === val) return;
			this.activeTime = val;
			this.$refs['datePicker'].init(this.datePickerValue);
		},
		handleTimeSelect(item) {
			let value = item.value();
			value.forEach((e, index) => {
				value[index] = dayjs(e).format(index === 0 ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD 23:59:59');
			});
			this.select = item;
			this.$emit('update:value', value);
			this.$emit('change', value);
			this.closeDate();
		},
		datePickerChange(val) {
			if (!val) return;
			this.innerValue.splice(this.activeTime, 1, val);
		},
		openDate() {
			this.showDate = true;
			this.init();
			uni.$u.sleep(300).then(() => {
				this.$refs['datePicker'].init(this.datePickerValue);
			});
		},
		confirmDate() {
			let value = this.$lodash.cloneDeep(this.innerValue);
			if (dayjs(value[0]).isAfter(dayjs(value[1]))) {
				uni.$u.toast('开始时间不能小于结束时间');
				return;
			}
			value.forEach((e, index) => {
				value[index] = dayjs(e).format(index === 0 ? 'YYYY-MM-DD 00:00:00' : 'YYYY-MM-DD 23:59:59');
			});

			this.select = null;
			this.$emit('update:value', value);
			this.$emit('change', value);
			this.closeDate();
		},
		closeDate() {
			this.showDate = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.date-picker {
	display: inline-block;

	&-title {
		background-color: $u-primary-light;
		display: flex;
		align-items: center;
		width: 100%;
		padding: 12rpx 24rpx;
		border-radius: 8rpx;
		border: 2rpx solid $u-border-color;

		.text {
			padding-right: 20rpx;
			flex: 1;
			// text-align: center;
		}
	}

	.date-picker-popup {
		&-header {
			@include between;
			height: 104rpx;
			font-size: 32rpx;
			font-weight: 500;
			padding: 0 32rpx;
			border-bottom: 1rpx solid $u-border-color;
		}

		&-center {
			@include between;
			padding: 0 32rpx;
			margin-top: 24rpx;

			&-item {
				@include center;
				width: 248rpx;
				height: 64rpx;
				border-bottom: 2rpx solid transparent;
			}

			.active-time {
				border-color: $u-primary;
			}

			&-unit {
				padding: 12rpx 24rpx;
				background-color: $u-primary-light;
				border-radius: 16rpx;
			}
		}

		.time-select {
			padding: 24rpx 32rpx 0;
			@include grid(208rpx);

			&-item {
				@include center;
				background-color: $u-bg-color;
				border-radius: 32rpx;
				height: 64rpx;
				width: 100%;
			}

			&-item:nth-child(-n + 3) {
				margin-bottom: 24rpx;
			}
		}
	}
}
</style>
